<template>
	<view class="bg-f">
		<uni-drawer @jihuo="jihuo" :user_money="user_money" :malock="ma_lock" :memu="memu" :foxtel="userinfo['user_name']" :visible="showLeft" mode="left" @close="closeDrawer('left')"></uni-drawer>
		<!-- 顶部菜单 star-->				
		<view class="is-nav">
			<view class="is-nav-li is-nav-user" @click="show('left')">
				<image src="../../static/img/common/user.png"></image>
			</view>
			<view class="is-nav-li is-center is-blue is-active">
				OTC接单
			</view>
			<view class="is-nav-li is-center is-grey">
				<text @tap="ordering">进行中</text>
			</view>
			<view class="is-nav-li is-size-14 is-online" :class="[online === false ? 'is-red-color is-bold' : 'is-blue']">
				{{online === false ? '离线' : '在线'}}
			</view>
		</view>				
		<!-- 顶部菜单 end -->
		<!-- 未激活 star-->
		<view v-show="ma_lock==0" class="is-alert is-size-14 has-pdlr-20">
			<text>您的账号未激活，无法接单</text>
			<text class="has-floatr is-blue" @tap="jihuo">去激活 ></text>
		</view>
		<!-- 未激活 end-->
		<!-- 主体 start  -->
		<view class="has-pdlr-20 has-mgt-20">
			<!--当前信息 start-->
			<view class="is-size-14">
				<!--当前余额 start-->
				<text class="is-grey">当前余额</text>
				<view>
					<view class="has-floatl is-size-30 is-bold">
						<text>{{user_money}}</text>DC
					</view>
					<view class="has-floatr">
						<navigator url="/pages/account/account">
						<button class="buy-button">
							<image src="../../static/img/common/money_ico.png" mode=""></image>
							一键买币
						</button>
						</navigator>
					</view>
				</view>
				<view class="clearfix"></view>
				<!--当前余额 end-->
				<!--可用余额 start-->
				<view class="is-grey has-mgt-20">
					<view class="has-floatl has-mgr-20">可用余额：<text>{{user_money_can}}DC</text></view>
					<view class="">冻结：<text>{{user_money_lock}}DC</text></view>
				</view>
				<!--可用余额 end-->
				<!--余额说明 start-->
				<view class="is-red has-mgt-15">可用余额低于{{fox_money_can}}DC时将无法接单</view>
				<!--余额说明 end-->
				<!--今日信息 start-->
				<view class="is-today has-mgt-20">
					<view class="is-today-li">
						<view class="is-size-25 is-blod">{{today_order}}</view>
						<text>今日接单</text>
					</view>
					<view class="is-today-li">
						<view class="is-size-25 is-blod">{{today_money}}</view>
						<text>今日流水(万)</text>
					</view>
					<view class="is-today-li">
						<view class="is-size-25 is-blod">{{today_incom}}</view>
						<text>今日盈利</text>
					</view>
				</view>
				<view class="clearfix"></view>
				<!--今日信息 end-->
			</view>			
			<!--当前信息 end-->
			<!--公告 start-->
			<view class="is-notice has-mgt-20 has-pd-10">
				<!--公告h1 start-->
				<view class="is-notice-h1">
					<view class="has-floatl">
						<image src="../../static/img/common/notice.png" mode=""></image>
						<text class="is-blod">公告</text>
					</view>
					<navigator url="/pages/notice/notice_list">
					<view class="has-floatr is-grey">全部</view>
					</navigator>
					<view class="clearfix"></view>
				</view>
				<!--公告h1 end-->
				<!--公告list start-->
				<view class="is-nonite-ul">
					<view class="is-nonite-li"  v-for="(item,index) in userinfo['notice']" :key="index">
						<navigator :url="'../notice/notice_page?g_id='+item.g_id">
						<view class="is-nonite-tit is-size-14">{{item.g_title}}</view>
						<view class="is-nonite-time is-grey">
							<text class="is-size-12">{{item.g_time}}</text>
							<image src="../../static/img/common/right_ico_grey.png" mode=""></image>
						</view>
						</navigator>
					</view>
				</view>			
				<!--公告list end-->
			</view>
			<!--公告 end-->
		</view>
		<!-- 主体 end-->
		<!-- 底部 start-->
		<view class="is-foot bg-f has-pdlr-20 has-mgb-10">
			<view class="is-index-foot">
				<button type="warn" class="is-set-qr" @click = "setcode">
					设置<image src="../../static/img/common/qr.png" mode=""></image>
				</button>
				<button type="primary" class="is-start-take" @click = "toorder">开始接单</button>
			</view>
		</view>
		<!-- 底部 ent-->
		<view>
		    <show-modal></show-modal>
		</view>
	</view>
</template>

<script>	
	var _self;
	var heartimer = null;
	var banben = null;
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
	export default {
		components: {
			uniDrawer,
		},
		data() {
			return {
				showLeft: false,
				showRight: false,
				foxtoken:'',
				foxcode:'',
				foxactive:'',
				memu:[],
				userinfo:[],
				fox_money_can:0,
				fox_user_jihuo:0,
				online:false,
				ma_lock:0,
				socketTask: null,
				// 确保websocket是打开状态
				is_open_socket: false,
				user_money:0,
				user_money_can:0,
				user_money_lock:0,
				today_order:0,
				today_money:0,
				today_incom:0,
			}
		},
		onLoad() {	
			_self = this;
			// uni.clearStorageSync();
			
			try {
			    const value = uni.getStorageSync('music');
				// console.log(value)
			    if (value === '') {
					uni.setStorageSync('music', true);
				}
				// console.log(uni.getStorageSync('music'))
			} catch (e) {
			    
			}
			
			let info = this.service.getfox();
			if(info[0]){
				// console.log(info[0])				
				this.foxtoken = info[0]['foxtoken'];
				//#ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
					banben = wgtinfo.version;//应用版本号
					console.log(banben)
				})
				//#endif
				// uni.clearStorageSync();
				uni.request({
					url: this.service.FOX_URL + 'diamond/get_userinfo_home',
					method:'POST',
					data: {
						user_key: this.foxtoken,
						banben:banben
					},
					dataType:'json',
					header:{
						'content-type':'application/x-www-form-urlencoded',
					},
					success: res => {
						// var rest = JSON.stringify(res);
						// console.log(res)
						var rest = res.data;
						if(rest.status == 'success'){
							this.userinfo = rest.msg;
							this.ma_lock = this.userinfo['ma_lock'];
							this.user_money = this.userinfo['user_money'];
							this.user_money_can = this.userinfo['user_money_can'];
							this.user_money_lock = this.userinfo['user_money_lock'];
							this.fox_money_can = this.userinfo['diamondset']['diamond_money_can'];
							this.fox_user_jihuo = this.userinfo['diamondset']['diamond_user_jihuo'];
							if(this.userinfo['ma']){
								uni.setStorageSync('matype', this.userinfo['ma']['ma_type']);
							}
							// console.log(this.userinfo)
						}else if(rest.status == 'error'){
							uni.clearStorageSync();
							uni.showToast({
								title:rest.msg,
								icon:'none',
								mask:true
							})
							setTimeout(function() {
							    uni.reLaunch({
							    	url:'../logon/login'
							    })
							}, 1500)
						}else{
							uni.clearStorageSync();
							uni.reLaunch({
								url:'../logon/login'
							})
						}
					}
				})
			}else{
				uni.reLaunch({
					url:'../logon/login'
				})
			}
			this.memu = this.service.memu;
			this.connectSocketInit();
		},
		watch:{
			'online':function(){
				this.LineAuto(this.online);
			}
		},
		methods: {
			show(e) {
				if (e === 'left') {
					this.showLeft = true
				}
			},
			closeDrawer(e) {
				if (e === 'left') {
					this.showLeft = false
				}
			},
			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
			connectSocketInit() {
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
				this.socketTask = uni.connectSocket({
					// 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
					url: this.service.FOX_SOKET,
					success(data) {
						console.log("websocket连接成功");
					},
				});
			 
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				this.socketTask.onOpen((res) => {
					console.log("WebSocket连接正常打开中...！");
					
					this.is_open_socket = true;
					this.online = true;
					// 注：只有连接正常打开中 ，才能正常成功发送消息
					let message = {'type':'userinfo','user_key':this.foxtoken};
					this.socketTask.send({
						data: JSON.stringify(message),
						async success() {
							console.log("userinfo消息发送成功");
						},
					});
					
					heartimer = setInterval(()=>{
						let message = {'type':'ping'};
						this.socketTask.send({
							data: JSON.stringify(message),
							async success() {
								console.log("心跳发送成功");
							},
						});
					},10000)

					// 注：只有连接正常打开中 ，才能正常收到消息
					this.socketTask.onMessage((res) => {
						console.log("收到服务器内容userinfo");
						var rest = JSON.parse(res.data);
						// console.log(rest)
						if(rest.type == 'userinfo'){
							this.ma_lock = rest.data.list['ma_lock'];
							this.user_money = rest.data.list['user_money'];
							this.user_money_can = rest.data.list['user_money_can'];
							this.user_money_lock = rest.data.list['user_money_lock'];
							this.today_order = rest.data.list['today_order'];
							this.today_money = rest.data.list['today_money'];
							this.today_incom = rest.data.list['today_incom'];
						}
						// let rets = JSON.stringify(this.listorder);
						// console.log(rets)
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
				// this.socketTask.onClose(() => {
				// 	_self.online = false;
				// })
				// this.socketTask.onError(function(){
				// 	_self.online = false;
				// })
			},
			jihuo(){
				this.$showModal({
				    title: '提示',
				    content: '激活帐号需扣除'+this.fox_user_jihuo+'DC，激活成功可进行接单',
					cancelText:'拒绝',
					confirmText:'同意',
				    success: function (res) {
				        if (res.confirm) {
				            uni.request({
				            	url: _self.service.FOX_URL + 'diamond/jihuo_user',
				            	method:'POST',
				            	data: {
				            		user_key: _self.foxtoken
				            	},
				            	dataType:'json',
				            	header:{
				            		'content-type':'application/x-www-form-urlencoded',
				            	},
				            	success: res => {
				            		// var rest = JSON.stringify(res);
				            		// console.log(res)
				            		var rest = res.data;
				            		if(rest.status == 'success'){
				            			uni.showToast({
				            				title:rest.msg,
				            				icon:'none',
				            				mask:true
				            			})
				            			setTimeout(function() {
				            			    uni.navigateTo({
				            			    	url:'/pages/index/index'
				            			    })
				            			}, 1500)
				            		}else{
				            			uni.showToast({
				            				title:rest.msg,
				            				icon:'none',
				            				mask:true
				            			})
				            		}
				            	}
				            })
				        }
				    }
				});
			},
			toorder(){
				if(this.ma_lock == 0){
					this.jihuo()
				}else{
					clearInterval(heartimer);
					setTimeout(function() {
						uni.reLaunch({
							url:'/pages/index/orderline'
						})
					}, 1000)
				}
			},
			setcode(){
				if(this.ma_lock == 0){
					this.jihuo()
				}else{
					uni.navigateTo({
						url:'../allcode/listcode'
					})
				}
			},
			ordering(){
				clearInterval(heartimer);
				setTimeout(function() {
					uni.reLaunch({
						url:'/pages/index/order_ing'
					})
				}, 1000)
			}
		},
		onUnload: function() {
			if(heartimer) {  
				clearInterval(heartimer);  
				heartimer = null;  
			}
		}
	}
</script>

<style>
	.buy-button{
		color: #2A62FF;
		background-color:#fff;
		border:2rpx solid #2A62FF;
		border-radius: 0;
	}
	.buy-button image{
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}
	.is-today .is-today-li{
		width:31%;
		float:left;
		text-align: center;
		background:#f0f0f0;
		margin-right:20rpx;
		padding:40rpx 0;
	}
	.is-today .is-today-li:last-child{
		margin-right:0;
	}
	.is-notice{
		background: #f0f0f0;
	}
	.is-notice .is-notice-h1 image{
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}
	.is-nonite-li{
		height: 120rpx;
		line-height: 60rpx;
		border-bottom: 2rpx solid #E5E5E5;
		margin-top:20rpx;
	}
	.is-nonite-time image{
		width: 50rpx;
		height: 50rpx;
		float: right;
	}
	.is-index-foot button{
		display: inline-block;
		border-radius: 0;
	}
	.is-set-qr{
		width:30%;
		margin-right: 3%;
	}
	.is-set-qr image{
		width:50rpx;
		height:40rpx;
		vertical-align: middle;
	}
	.is-start-take{
		width:57%
	}
</style>
